<template>
  <div class="app">
    <div class="top">
      <simple-step-bar
        style="margin-bottom: 28px"
        :totalWidth="1284"
        :totalHeight="48"
        :unit="'px'"
        :stepList="stepList3"
        :currentStep="active"
        :itemWidth="423"
        :lienWidth="2"
        :processingFontColor="'#fff'"
        :processingFontColorN="'#7C7D80'"
        :lienColor="'#fff'"
        :stepBorderColor="'#fff'"
        :stepBackground="'#F3F3F3'"
        :processingBackground="'#56A4D4'"
      ></simple-step-bar>
    </div>
    <div class="main" v-if="active == 1">
      <el-form label-position="right" label-width="100px">
        <el-form-item label="课题名称" class="lab1">
          <el-input class="inp1" v-model="from.lessonsTopicName"></el-input>
        </el-form-item>
        <el-form-item label="学分" class="lab2">
          <el-input class="inp2" v-model="from.score"></el-input>
        </el-form-item>
        <el-form-item label="课程专业" class="lab2">
          <el-select
            placeholder="请选择课程专业"
            class="inp2"
            prop="region"
            v-model="from.majorId"
          >
            <el-option
              :label="item.majorName"
              :value="item.majorId"
              v-for="(item, index) in majorData"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课件封面" prop="name" class="lab3">
          <!-- 上传图片 -->
          <el-upload
            class="avatar-uploader"
            action=""
            name="file"
            :show-file-list="false"
            v-loading="isLoading"
            :http-request="fileChange"
            :on-change="fileChange1"
            :on-success="handleSuccess"
            element-loading-text="加载中，请稍后..."
            :limit="1"
            ref="upload"
          >
            <img
              v-if="from.imageUrl"
              :src="from.imageUrl"
              alt=""
              class="avatar"
            />
            <i
              v-if="!from.imageUrl"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
            <div v-if="!from.imageUrl" class="text">上传课件封面</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介" prop="name1" class="lab4">
          <textarea
            placeholder="多行输入"
            cols="30"
            rows="10"
            style="width: 180px; height: 100px; font-size: 16px"
            v-model="from.lessonsTopicIntroduction"
          ></textarea>
        </el-form-item>
      </el-form>
      <div>
        <button @click="$router.go(-1)" class="btn1">取消</button>
        <button @click="aaa" class="btn2">下一步</button>
      </div>
    </div>
    <div v-if="active == 2" class="maintwo">
      <div class="leftbox">
        <div class="lefttopbox">
          <button class="leftbtn">添加章节</button>
          <button class="leftbtn">添加课时</button>
          <button class="leftbtn">编辑</button>
        </div>
        <div class="leftbottonbox">
          <div class="leftTree">
            <div class="leftTreeBox">
              <el-tree
                :data="threelist"
                :highlight-current="true"
                @current-change="handleNodeClick"
              ></el-tree>
            </div>
          </div>
          <div></div>
        </div>
      </div>
      <div class="rightbox">
        <el-form label-position="right" label-width="100px">
          <el-form-item label="添加视频" class="">
            <el-upload
              class="upload-demo"
              drag
              action=""
              name="file"
              multiple
              v-loading="isLoading"
              :on-change="fileChange1"
              :http-request="fileChange"
              :on-success="handleSuccess"
              element-loading-text="加载中，请稍后..."
              ref="upload"
            >
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga7fdd06e63bc90803247356a778d32f6f332af47ed46633c8c0f11e45fd131bd"
                alt=""
                style="margin-top: 45px"
              />
              <div class="el-upload__text">点击上传封面</div>
            </el-upload>
            <div class="sliderBox">
              <p>
                <svg
                  width="24"
                  height="24"
                  style="margin: 2px 0 0 5px"
                  viewBox="-50 -50 300 300"
                >
                  <polygon
                    class="triangle"
                    stroke-linejoin="round"
                    points="100,0 0,200 200,200"
                  />
                </svg>
              </p>
              <div class="slider">
                <span>00:00</span>
                <el-slider
                  v-model="value2"
                  @change="setSlider"
                  :format-tooltip="setTooltip"
                  :max="max"
                ></el-slider>
                <span>02:00</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="添加文件" class="">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
            >
              <el-button size="small" type="primary" class="upload-btn"
                >选择文件</el-button
              >
              <div slot="tip" class="el-upload__tip">
                <span class="tipSpan"
                  >1.支持的文件类型CSV格式<br />
                  2.文件要求格式为Word/Wps/Excle等格式</span
                >
              </div>
            </el-upload>
          </el-form-item>
        </el-form>

        <button @click="less(2)" class="btn1">上一步</button>
        <button @click="plus(2)" class="btn2">下一步</button>
      </div>
    </div>
    <div v-if="active == 3">
      <div class="tabsBox">
        <div class="tabs">
          <el-tabs type="border-card">
            <el-tab-pane label="公开课题">
              <el-form
                :inline="true"
                class="demo-form-inline"
                label-position="right"
              >
                <el-form-item
                  label="课堂性质："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择课堂性质"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="开设学期："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择开设学期"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="私有课题">
              <el-form
                :inline="true"
                class="demo-form-inline"
                label-position="right"
              >
                <el-form-item
                  label="课堂性质："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择课堂性质"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="开设学期："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择开设学期"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="所属院校："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择所属院校"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="所属专业："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择所属专业"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="所属班级："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择所属班级"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="课题类型："
                  label-width="100px"
                  prop="region"
                >
                  <el-select
                    class="select"
                    placeholder="请选择课题类型"
                    style="width: 270px"
                    value=""
                  >
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="btn">
          <button @click="less(2)" class="btn1">上一步</button>
          <button @click="handleConfirm" class="btn2">确定</button>
        </div>
      </div>
    </div>
    <div class="dialog">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
      >
        <el-button type="primary">添加试题</el-button>
        <div class="footerBox">
          <div class="test">
            <p>在线测试</p>
          </div>
          <div class="footerMain"></div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { majorListApi } from "@/api/basics/major";
import { uploadImgApi, addListApi } from "@/api/topic/topic";
export default {
  data() {
    return {
      max: 120,
      value2: 120,
      dialogVisible: false,
      //上传文件
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      stepList3: ["基础信息", "课件详细", "课题设置"],
      active: 1,
      //上传图片
      dialogImageUrl: "",
      disabled: false,
      //三级联动
      threelist: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      isLoading: false, // loading
      majorData: [],
      from: {
        id: "",
        lessonsTopicName: "",
        imageUrl: "",
        lessonsTopicTypeId: "",
        lessonsTopicIntroduction: "",
        score: "",
        majorId: "",
        schoolSemesterId: "",
        classroomNature: "",
        status: 0,
      },
    };
  },
  created() {
    this.majorList({ pageSize: 100 });
  },
  methods: {
    // 获取专业列表
    majorList(data) {
      majorListApi(data).then((res) => {
        console.log(res);
        this.majorData = res.rows;
      });
    },
    // 上传图片 http
    fileChange(files) {
      let formData = new FormData();
      formData.append("file", files.file);
    },

    // 上传成功
    handleSuccess() {
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },

    // 上传图片 change
    fileChange1(files) {
      let formData = new FormData();
      formData.append("file", files.raw);
      uploadImgApi(formData).then((res) => {
        if (res.code == 200) {
          this.from.imageUrl = res.data.url;
          this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
        }
      });
    },

    // 步骤一下一步
    aaa() {
      this.plus(2);
      addListApi(this.from).then((res) => {
        console.log(res);
      });
    },

    // 确定
    handleConfirm() {
      this.$router.go(-1);
    },

    // 设置 Tooltip展示文字
    setTooltip(val) {
      var t;
      if (val > -1) {
        var min = Math.floor(val / 60) % 60;
        var sec = val % 60;

        if (min < 10) {
          t = "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec;
      }
      return t;
    },

    // 获取点击位置
    setSlider(val) {
      console.log(val);
    },
    // 下一步
    plus(type) {
      switch (type) {
        case 1:
          this.active++;
          break;
        case 2:
          this.active++;
          break;
        case 3:
          this.active++;
          break;
      }
    },
    // 上一步
    less(type) {
      switch (type) {
        case 1:
          this.active--;
          break;
        case 2:
          this.active--;
          break;
        case 3:
          this.active--;
          break;
      }
    },

    //上传图片
    handleRemove(file) {
      console.log(file);
    },

    //三级联动
    handleNodeClick(data) {
      console.log(data);
    },

    handlePreview(file) {
      console.log(file);
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
}
.top {
  background: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.main {
  margin-left: 20%;
  margin-top: 20px;
  background: #ffffff;
  width: 1036px;
}
.lab1 {
  margin-left: 200px;
  margin-top: 56px;
  .inp1 {
    width: 507px;
    height: 44px;
  }
}
.lab2 {
  margin-left: 200px;
  .inp2 {
    width: 507px;
    height: 44px;
  }
}
.lab3 {
  margin-left: 200px;
}
.lab4 {
  margin-left: 200px;
}
.btn1 {
  width: 126px;
  height: 40px;
  background: #f0f0f0;
  border-radius: 20px;
  margin-bottom: 200px;
  margin-left: 350px;
  margin-top: 30px;
  border: none;
}
.btn2 {
  width: 126px;
  height: 40px;
  background: #1990ff;
  border-radius: 20px;
  margin-top: 30px;
  margin-left: 47px;
  border: none;
  color: #fff;
}
.maintwo {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
}
.leftbox {
  margin-top: 30px;
  .lefttopbox {
    width: 266px;
    height: 80px;
    border: 2px solid #f3f2f7;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    .leftbtn {
      width: 79px;
      height: 36px;
      background: #56a4d4;
      border-radius: 4px;
      border: none;
      color: #ffffff;
    }
  }
}
.leftTree {
  min-width: 250px;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  border-right: solid 2px #f3f2f7;

  .leftTreeBox {
    width: 100%;
    height: calc(100vh - 110px);
  }

  ::v-deep .el-tree {
    width: 100%;
  }

  ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
    height: 56px;
    position: relative;
    .el-tree-node__expand-icon {
      position: absolute;
      right: 0;
      bottom: 14px;
      transform: rotate(-90deg);
      font-size: 18px;
    }
    .el-tree-node__label {
      font-size: 16px;
      margin-left: 15px;
    }
    .el-tree-node__expand-icon.expanded {
      transform: rotate(0deg);
    }

    .el-icon-caret-right:before {
      content: "\e6df";
    }
  }

  ::v-deep.el-menu {
    border: none;
  }
}
.rightbox {
  margin-top: 30px;
  margin-left: 39px;
}
.upload-btn {
  width: 112px;
  height: 40px;
  background: #56a4d4;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  font-size: 16px;
  color: #ffffff;
  font-family: PingFangSC-Regular, PingFang SC;
}
.xBtn {
  width: 112px;
  height: 40px;
  background: #56a4d4;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  font-size: 16px;
  color: #ffffff;
  font-family: PingFangSC-Regular, PingFang SC;
  border: none;
}
.tipSpan {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.footerBox {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 20px;
  .test {
    width: 100%;
    height: 59px;
    background: #f2f3f7;
    p {
      width: 64px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2f4050;
      line-height: 59px;
      margin-left: 26px;
    }
  }
  .footerMain {
    height: auto;
    width: 100%;
    border: 1px solid #dcdcdc;
  }
}

.tabsBox {
  width: 1250px;
  margin: 20px auto 0;
  background-color: #fff;
  padding: 50px 0;

  .tabs {
    width: 100%;
    .el-tabs--border-card {
      width: 100%;
      border: none;
      box-shadow: none;

      ::v-deep .el-tabs__header {
        background-color: #fff;
        border: none;

        .el-tabs__nav-scroll {
          display: flex;
          justify-content: center;
          align-items: center;
          .el-tabs__nav {
            margin: 10px 0 0 0;
            display: flex;
          }
          .el-tabs__item.is-active {
            color: #fff;
            background-color: #56a4d4;
          }
          .el-tabs__item {
            width: 150px;
            height: 30px;
            border: solid 1px #dcdfe6;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .el-tabs__item:nth-child(1) {
            border-radius: 5px 0 0 5px;
          }
          .el-tabs__item:nth-child(2) {
            border-radius: 0 5px 5px 0;
          }
        }
      }

      ::v-deep .el-tabs__content {
        padding-top: 70px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-form {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }

  .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn1,
    .btn2 {
      margin: 0 20px 0 0;
    }
  }
}

.sliderBox {
  width: 360px;
  height: 50px;
  border-radius: 50px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  p {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #56a4d4;
    margin: 0 5px 0 15px;
    display: flex;
    align-items: center;
    .triangle {
      fill: #fff;
      stroke: #fff;
      stroke-width: 10;
      transform: rotate(-26deg);
    }
  }

  .slider {
    flex: 1;
    padding: 0 20px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-slider {
      flex: 1;
      margin: 0 20px 0 10px;
      ::v-deep .el-slider__runway {
        background-color: #409eff;
      }
    }
  }
}
.dialog {
  ::v-deep .el-dialog {
    max-width: 750px;
    min-width: 500px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }

  ::v-deep .el-dialog__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: #4895db;
    padding: 0;
    border-radius: 10px 10px 0 0;

    span {
      font-size: 16px;
      color: #fff;
    }
  }

  ::v-deep .el-dialog__headerbtn {
    top: 15px;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 18px;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    text-align: initial;
    display: flex;
    justify-content: center;
  }

  ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  ::v-deep .el-form-item__content {
    width: 300px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-dialog__footer {
    padding: 10px 20px 50px;
  }

  ::v-deep .el-button--default {
    width: 130px;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #aaaaaa;
    border: none;
  }

  ::v-deep .el-button + .el-button {
    width: 130px;
    border-radius: 20px;
    margin-left: 50px;
    background-color: #4895db;
    border-color: #4895db;
  }
}

.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .text {
    position: absolute;
    bottom: 30px;
    left: 21%;
    font-size: 16px;
    color: #8c939d;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
</style>



